// import { useEffect } from 'react';
import {ExclamationCircleOutlined} from '@ant-design/icons';
import {Button, Modal, message} from 'antd';
import {history} from 'umi';
import request from '@/utils/request';
import styles from './index.less';

function getColor(status: string) {
    switch (status) {
        case '充电中':
            return '#4c97ff';
        case '空闲中':
            return '#32deac';
        case '离线':
            return '#9da7b3';
        case '已插枪':
            return '#ffd184';
        case '故障':
            return '#ff513a';
        default:
            return ''
    }
}
export default function GunCard(props: any) {
    const [modal, contextHolder] = Modal.useModal();
    const {dispatch, curGun} = props;
    // console.log('curGun', curGun);
    const shutDownGun = () => {
        // console.log('shutDownGun');
        modal.confirm({
            title: '您确认要结束充电吗?',
            icon: <ExclamationCircleOutlined/>,
            content: '',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                console.log('点击了确定');
                request(
                    '/api1/monitorDevice/shutDownByPileCode',
                    {
                        method: 'post',
                        data: {
                            pileCode: curGun?.pileCode,
                            interfaceCode: curGun?.gunName,
                            tradeNo: curGun?.tradeNo
                        }
                    }).then((response) => {
                        console.log('停止充电回调', response);
                        if(response.code && response.code === 200){
                            message.success('操作成功');
                            setTimeout(() => {
                                dispatch({
                                    type: 'monitor/load'
                                })
                            }, 1500)
                        }
                })
            }
        });
    }
    return (
        <div className={styles.gunCard}>
            {contextHolder}
            <div className={styles.cardHeader}>
                <div className={styles.name}>
                    {curGun.code}
                    <span>号枪</span>
                </div>
                <div className={styles.status} style={{backgroundColor: getColor(curGun.status)}}>{curGun.status}</div>
            </div>
            <div className={styles.gunContent}>
                <div className={styles.financeLine}>
                    <div className={styles.financeBlock}>
                        <div>输出电流</div>
                        <div>{curGun.exportElectricity || '0.0'}A</div>
                    </div>
                    <div className={styles.financeBlock}>
                        <div>输出电压</div>
                        <div>{curGun.exportVoltage || '0.0'}V</div>
                    </div>
                    <div className={styles.financeBlock}>
                        <div>当前SOC</div>
                        <div>{curGun.soc || '0.0'}%</div>
                    </div>
                    {
                        curGun.status === '充电中' ? <div className={styles.financeBlock}>
                            <div>剩余时间</div>
                            <div>{curGun.remainTime || '0.0'}分钟</div>
                        </div> : <div className={styles.financeBlock} />
                    }
                </div>
                <div className={styles.footerLine}>
                    {
                        curGun.status === '充电中' && curGun?.tradeNo ? <Button
                            size='small'
                            color="danger"
                            variant="solid"
                            style={{marginRight: 8}}
                            onClick={() => shutDownGun()}
                        >
                            结束充电
                        </Button> : null
                    }
                            <Button
                            color="danger"
                            variant="solid"
                            size='small'
                            style={{marginRight: 6, background: '#fccf00'}}
                            onClick={() => history.push('/monitor/warning', {
                                pileCode: curGun.pileCode,
                                gunCode: curGun.code,
                            })}
                        >
                            故障信息
                        </Button>
                        <Button
                            color="primary"
                            variant="solid"
                            size='small'
                            style={{marginRight: 6}}
                            // className={styles.order}
                            // onClick={() => history.push(`/asset/order?pileCode=1111`)}
                            // onClick={() => history.push({
                            //     pathname: '/asset/order',
                            //     state: {
                            //         pileCode: '1111'
                            //     }
                            // })}
                            onClick={() => {
                                dispatch({
                                    type: 'order/setState',
                                    payload: {
                                        searchState: {
                                            pileCode: curGun.pileCode,
                                            gunCode: curGun.code,
                                            pageNum: 1,
                                            pageSize: 10
                                        }
                                    }
                                });
                                setTimeout(() => {
                                    history.push('/order/chargeOrder', {
                                        pileCode: curGun.pileCode,
                                        gunCode: curGun.code,
                                    })
                                }, 300)
                            }}
                        >
                            订单
                        </Button >
                    </div>
            </div>
        </div>
    );
}
